/*
 * @Author: weidewei
 * @Date: 2025-10-21 09:51:33
 * @LastEditors: weidewei
 * @LastEditTime: 2025-11-26 16:06:53
 * @Description:
 * @FilePath: \2025-front-face\vite-react-ts-template\src\layout.tsx
 */
import { Outlet, NavLink, useNavigation } from 'react-router-dom';

// css in js的库，允许在React组件中直接编写css样式
import styled from 'styled-components';

export default function Layout() {
  const navigation = useNavigation();
  return (
    <Wrapper>
      <div className="header"></div>
      <div className="main">
        <aside>
          <div className="menu_item">
            <NavLink to="/user" end>
              user
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/manage" end>
              manage
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/file/123" end>
              file
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/info" end>
              info
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useState" end>
              useState
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useRef" end>
              useRef
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useTransition" end>
              useTransition
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useEffect" end>
              useEffect
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useContext" end>
              useContext
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useLayoutEffect" end>
              useLayoutEffect
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useReducer" end>
              useReducer
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/shopCar" end>
              shopCar
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useSyncExternalStore" end>
              useSyncExternalStore
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useDeferredValue" end>
              useDeferredValue
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useImperativeHandle" end>
              useImperativeHandle
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/memo" end>
              memo
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useMemo" end>
              useMemo
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/useCallback" end>
              useCallback
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/communication" end>
              communication
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/react-route" end>
              react-route
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/ts-learn" end>
              ts-learn
            </NavLink>
          </div>
          <div className="menu_item">
            <NavLink to="/suspense" end>
              suspense
            </NavLink>
          </div>
        </aside>
        <section>
          {navigation.state === 'loading' && <div>数据加载中</div>}
          <Outlet />
        </section>
      </div>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  .header {
    height: 60px;
    border: 1px solid #000;
  }
  .main {
    height: calc(100vh - 60px);
    display: flex;
    aside {
      width: 260px;
      border: 1px solid #000;
      .active {
        color: red;
      }
    }
    section {
      flex: 1;
    }
  }
`;
